<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{$t('订单号')}}：</p>
        <el-input v-model="order_id" :placeholder="$t('请输入订单号')"></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{$t('会员号')}}：</p>
        <el-input v-model="member_id" :placeholder="$t('请输入会员号')"></el-input>
      </div>
      <div class="select_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{$t('支付方式')}}：</p>
        <el-select
          v-model="clientVal"
          :placeholder="$t('请选择')"
          @change="clientChange"
        >
          <el-option
            v-for="item in clientArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <button class="sub_btn font14 text_white bg_blue" @click="handleSearch">
        {{$t('提交')}}
      </button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column
          prop="order_id"
          :label="$t('订单号')"
          width="250"
        ></el-table-column>
        <el-table-column
          prop="avatar"
          :label="$t('头像')"
          width="180"
        >
          <template slot-scope="{row}">
            <img class="avatar" :src="row.avatar">
          </template>
        </el-table-column>
        <el-table-column
          prop="member_id"
          :label="$t('会员号')"
          width="180"
        ></el-table-column>
        <el-table-column prop="username" :label="$t('用户名称')"></el-table-column>
        <el-table-column
          prop="refund_amount"
          :label="$t('退款金额')"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="user_time"
          :label="$t('退款时间')"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="status"
          :label="$t('付款方式')"
          width="180"
        >
          <template slot-scope="{row}">
            <span v-if="row.status == 1">{{$t('微信支付')}}</span>
            <span v-if="row.status == 2">{{$t('支付宝支付')}}</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box ">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="21"
        >
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'finance-refundLog',
  data() {
    let that = this
    return {
      order_id: "",
      member_id: '',
      clientVal: 0,
      clientArr: [
        {
          value: 0,
          label: that.$t('选择支付方式')
        },
        {
          value: 1,
          label: that.$t('微信支付')
        },
        {
          value: 2,
          label: that.$t('支付宝支付')
        },
      ],
      tableData: [
        {
          order_id: "202004021003052085",
          username: "广诚机动车检测站	广诚机动车检测站",
          avatar: "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80",
          member_id: "10338206",
          refund_amount: "50",
          user_time: "2020-04-02 10:03:07",
          status: 1,
        },
        {
          order_id: "202004021003052085",
          username: "政兴人33",
          avatar: "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80",
          member_id: "10338206",
          refund_amount: "50",
          user_time: "2020-04-02 10:03:07",
          status: 2,
        },
        {
          order_id: "202004021003052085",
          username: "政兴人力3333",
          avatar: "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80",
          member_id: "10338206",
          refund_amount: "50",
          user_time: "2020-04-02 10:03:07",
          status: 1,
        },
      ],
      currentPage: 1
    };
  },
  mounted() {},
  methods: {
    clientChange(val) {
      this.clientVal = val;
    },
    handleSearch() {},
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  }
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 280px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.avatar{
  width: 40px;
  height: 40px;
}
</style>
